<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ByteCollege云课</title>
    <link rel="stylesheet" th:href="@{css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{css/styles.css}">
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <style>
        body {
            background: #f9f9f9;
            font-size: 12px;
        }

        .position-relative {
            position: relative;
        }

        .banner-container form .tip {
            padding-top: 5px;
            color: hsla(0, 0%, 100%, .6);
        }

        .header {
            background-color: #191e29;
            border-width: 0;
        }

        .header .navbar-brand {
            padding: 0;
        }

        .header .navbar-brand img {
            height: 50px;
        }

        .header .navbar-nav > li > a {
            font-size: 16px;
        }

        .header .navbar-nav .dropdown .dropdown-menu {
            min-width: 130px;
            border-width: 0;
            text-align: center;
        }

        .header .navbar-nav .dropdown .dropdown-menu {
            background-color: #191e29;
        }

        .header .btns .sign-up {
            color: #fff;
            background-color: #11aa8c;
            border: 1px solid #11aa8c;
            border-radius: 4px;
        }

        .layout-body, .layout-side {
            padding: 0 5px;
        }

        .layout {
            min-height: 80%;
            margin-top: 70px;
            margin-bottom: 20px;
        }

        .content {
            margin-bottom: 10px;
            padding: 30px;
            background: #fff;
            border: 1px solid #eee;
        }

        .course-cates-content > a {
            display: inline-block;
            margin: 0 4px 4px 0;
            padding: 4px 10px;
            color: #666;
            border-radius: 15px;
            cursor: pointer;
            transition: color 1s ease;
            transition: background .5s ease;
        }

        .course-cates:first-child {
            margin-bottom: 10px;
        }

        .course-cates {
            font-size: 16px;
            color: #666;
        }

        .course-cates-title {
            padding: 4px 0 4px 15px;
        }

        .course-cates-content .course-cates-vip.active, .course-cates-content .course-cates-vip:focus, .course-cates-content .course-cates-vip:hover, .course-cates-content > a.active, .course-cates-content > a:focus, .course-cates-content > a:hover {
            color: #fff;
            background: #08bf91;
            text-decoration: none;
        }

        .course-cates-content .course-cates-vip, .course-cates-content > a {
            display: inline-block;
            margin: 0 4px 4px 0;
            padding: 4px 10px;
            color: #666;
            border-radius: 15px;
            cursor: pointer;
            transition: color 1s ease;
            transition: background .5s ease;
        }

        .course-cates-content .course-cates-vip a {
            color: #666;
        }

        .course-cates-vip a:hover {
            color: #fff;
            text-decoration: none;
        }

        .course-cates {
            font-size: 16px;
            color: #666;
        }

        .nav-tabs {
            margin-bottom: 10px;
            border: none;
            border-bottom: 1px solid #eee;
        }

        .courses-sort {
            position: absolute;
            right: 30px;
            top: 36px;
            color: #c0c4cf;
        }

        .search-result {
            display: none;
            margin: 12px 0;
            font-size: 13px;
            background: #f7f7f7;
            padding: 8px;
            color: #666;
        }

        .course-box {
            display: block;
            position: relative;
            min-height: 220px;
            margin: 0;
            background: #fff;
            box-shadow: 0 2px 2px 0 #eee;
        }

        .pagination-container {
            text-align: center;
            clear: both;
        }

        .layout-body, .layout-side {
            padding: 0 5px;
        }

        .panel-userinfo {
            margin-bottom: 10px;
            border-color: #eee;
        }

        .panel-userinfo .body-userinfo .userinfo-header {
            word-break: break-all;
            overflow: visible;
        }

        .panel-userinfo .body-userinfo .userinfo-header .media-left {
            padding-left: 20px;
        }

        .user-avatar {
            position: relative;
            display: inline-block;
        }

        .panel-userinfo .body-userinfo .userinfo-footer {
            margin-bottom: -10px;
            color: #08bf91;
        }

        .userinfo-footer {
            border-top: 1px solid #ecf0f3;
            padding: 12px 0;
            color: #4c5157;
            margin: 10px 0 0;
        }

        .media-body, .media-left, .media-right {
            display: table-cell;
            vertical-align: middle;
        }

        .panel-userinfo .body-userinfo .userinfo-header .media-body {
            overflow: visible;
        }

        .panel-userinfo .body-userinfo .userinfo-header .media-body .username {
            color: #000;
            font-size: 16px;
        }

        .panel-userinfo .body-userinfo .userinfo-data {
            text-align: center;
        }

        .panel-userinfo .body-userinfo .userinfo-data .btn-group-lr {
            padding-left: 22px;
        }

        .panel-userinfo .body-userinfo .userinfo-data .btn-group-lr .login-btn {
            border: 1px solid #0c9;
            border-radius: 2px;
            background: #fff;
            color: #6e6e6e;
        }

        .btn {
            border-radius: 0;
        }

        .panel-userinfo .body-userinfo .userinfo-footer {
            margin-bottom: -10px;
            color: #08bf91;
        }

        .panel-userinfo .body-userinfo .userinfo-footer div.pos-left {
            text-align: left;
        }

        .panel-userinfo .body-userinfo .userinfo-footer div.pos-left a {
            color: #0c9;
        }

        .panel-userinfo .body-userinfo .userinfo-footer div.pos-right {
            text-align: right;
        }

        .panel-userinfo .body-userinfo .userinfo-footer div.pos-right a {
            color: #0c9;
        }

        .sidebox {
            margin-bottom: 10px;
            padding: 15px;
            background: #fff;
            border: 1px solid #eee;
        }

        .sidebox-header {
            overflow: hidden;
        }

        .sidebox-header {
            padding: 0 0 10px;
            border-bottom: 1px solid #eee;
        }

        .sidebox-title {
            float: left;
            margin: 0;
            font-size: 16px;
            color: #4c5157;
        }

        .sidebox-body {
            padding: 10px 0;
            font-size: 14px;
        }

        .side-list-body a {
            display: block;
            padding: 10px;
            color: #565a61;
            font-size: 14px;
            word-break: break-all;
            word-wrap: break-word;
        }

        .course-box {
            display: block;
            position: relative;
            min-height: 220px;
            margin: 0;
            background: #fff;
            box-shadow: 0 2px 2px 0 #eee;
        }

        .course-box .course-img {
            width: 100%;
        }

        .course-box .course-img > img {
            width: 100%;
            height: 140px;
        }

        .course-box .course-body {
            padding: 5% 5% 0;
        }

        .course-box .course-body .course-title {
            display: inline-block;
            width: 100%;
            color: #4c5157;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .course-box .course-footer {
            width: 100%;
            height: 43px;
            color: #9b9da2;
            padding: 10px 5%;
            overflow: hidden;
        }

        .course-box .course-footer .course-per-num {
            display: inline-block;
            padding: 4px 0 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }

        .course-box .sign-box {
            width: 100%;
            color: #565a61;
            padding: 0 5%;
            position: absolute;
            z-index: 9;
            top: -5px;
        }

        .side-image.side-qrcode {
            padding: 15px 0;
        }

        .side-image {
            margin-bottom: 10px;
            background: #fff;
            text-align: center;
        }

        .side-image.side-qrcode img {
            width: 183px;
            max-width: 100%;
        }

        .side-image .side-image-text {
            color: #4c5157;
            font-size: 16px;
        }

        .footer {
            padding-top: 20px;
            background: #191e29;
        }

        .footer-col .col-title {
            font-size: 14px;
            margin-bottom: 10px;
            color: hsla(0, 0%, 100%, .5);
        }

        .footer-col a {
            display: inline-block;
            margin-bottom: 3px;
            color: hsla(0, 0%, 100%, .5);
        }

        .copyright, .copyright a {
            color: #777;
        }

        .copyright {
            height: 50px;
            line-height: 50px;
            background: #171918;
            margin-top: 20px;
        }

        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>
<div th:include="index::head-nav">
</div>

<!--课程模块开始-->
<div class="container layout layout-margin-top">
    <div class="row">
        <div class="col-md-9 layout-body">
            <div class="content">
                <div class="row course-cates">
                    <div class="col-md-1 course-cates-title">类别：</div>
                    <div class="col-md-11 course-cates-content">
                        <a th:class="${filed} eq '-1' ? 'active' : 0" th:href="'?filed=-1&typeId='+${typeId}+'&search='+${search}">全部</a>
                        <a th:class="${filed} eq 'new' ? 'active' : 0" th:href="'?filed=new&typeId='+${typeId}+'&search='+${search}">最新</a>
                        <a th:class="${filed} eq 'hot' ? 'active' : 0" th:href="'?filed=hot&typeId='+${typeId}+'&search='+${search}">最热</a>
                        <a th:class="${filed} eq '0' ? 'active' : 0" th:href="'?filed=0&typeId='+${typeId}+'&search='+${search}">免费</a>
                        <div th:class="${filed} eq '1' ? 'course-cates-vip active' : 'course-cates-vip'" >
                            <a  th:href="'?filed=1&typeId='+${typeId}+'&search='+${search}"><img th:src="@{/img/vip-icon.png}"></a>
                            <a  th:href="'?filed=1&typeId='+${typeId}+'&search='+${search}">会员</a>
                        </div>
                    </div>
                </div>
                <div class="row course-cates">
                    <div class="col-md-1 course-cates-title">标签：</div>
                    <div class="col-md-11 course-cates-content">
                        <a th:class="${typeId} eq '-1' ? 'active':0" th:href="'?typyId=-1&filed='+${filed}+'&search='+${search}">全部</a>
                        <a th:each="item:${typeList}"  th:href="'?typeId='+${item.ctypeId}+'&filed='+${filed}+'&search='+${search}" th:class="${typeId} eq ${item.ctypeId} ? 'active' : 0" th:text="${item.ctypeName}"></a>
                    </div>
                </div>
            </div>
            <div class="content position-relative">

                <div class="search-result"></div>
                <div>
                    <div class="row">
                        <div th:each="course:${courseList}" class="col-md-4 col-sm-6  course">
                            <a class="course-box" th:href="@{/course/getById(courseId=${course.courseId})}">
                                <div class="sign-box">
                                    <i class="fa fa-star-o course-follow pull-right"
                                       data-follow-url="/courses/63/follow"
                                       data-unfollow-url="/courses/63/unfollow" style="display:none">
                                    </i>
                                </div>
                                <div class="course-img">
                                    <img th:alt="${course.courseName}"
                                         th:src="${course.coursePic}">
                                </div>
                                <div class="course-body">
                                <span class="course-title" data-toggle="tooltip" data-placement="bottom"
                                      th:title="${course.courseName}" th:text="${course.courseName}"></span>
                                </div>
                                <div class="course-footer">
                                    <span class="course-per-num pull-left">
                                        <i class="fa fa-users"></i>
                                        [[${course.courseClicks}]]
                                    </span>
                                    <span th:if="${course.courseStatus} eq 1" class="pull-right">
                                        <img th:src="@{/img/vip-icon.png}">
                                        <span>会员</span>
                                    </span>
                                    <span th:if="${course.courseStatus} eq 0" class="pull-right">
                                        <span>免费课程</span>
                                    </span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <nav class="pagination-container">
                        <ul class="pagination">
                            <li th:class="${page.hasPrevious()?0:'disabled'}">
                                <a th:unless="${page.current}==1"
                                   th:href="'?pageIndex='+(${page.current}-1)+'&filed='+${filed}+'&typeId='+${typeId}+'&search='+${search}"
                                   aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                                <a th:if="${page.current}==1" href="javascript:void(0);" aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                            <li th:class="${page.current} eq 1 ? 'active':0">
                                <a th:href="'?pageIndex=1'+'&filed='+${filed}+'&typeId='+${typeId}+'&search='+${search}">首页</a>
                            </li>
                            <li>
                                <a href="#">第[[${page.current}]]页/共[[${page.pages}]]页</a>
                            </li>
                            <li  th:class="${page.current ne page.pages} ? 'active':0">
                                <a th:href="'?pageIndex='+${page.pages}+'&filed='+${filed}+'&typeId='+${typeId}+'&search='+${search}">尾页</a>
                            </li>

                            <li th:class="${page.hasNext()?0:'disabled'}">
                                <a th:unless="${page.current}==${page.pages}" aria-label="Next"
                                   th:href="'?pageIndex='+(${page.current}+1)+'&filed='+${filed}+'&typeId='+${typeId}+'&search='+${search}">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                                <a th:if="${page.current}==${page.pages}" aria-label="Next"
                                   href="javascript:void(0);">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="col-md-3 layout-side">
            <div class="panel panel-default panel-userinfo">
                <div class="panel-body body-userinfo">
                    <div class="media userinfo-header">
                        <div class="media-left">
                            <div class="user-avatar">
                                <a class="avatar" href="#sign-modal" data-toggle="modal" data-sign="signin">
                                    <img class="circle" th:src="@{/img/1471514004752.png}">
                                </a>
                            </div>
                        </div>
                        <div class="media-body">
                            <span class="media-heading username">欢迎佰特云课</span>
                            <p class="vip-remain">打造卓越技术</p>
                        </div>
                    </div>

                    <div th:unless="${session?.data?.userId}" class="row userinfo-data">
                        <hr>
                        <div class="btn-group-lr" >
                            <a th:href="@{/user/tologin}" type="button" class="btn btn-success col-md-5 col-xs-6 login-btn"
                               data-toggle="modal" data-sign="signin">登录</a>
                            <a th:href="@{/user/toReg}" type="button"
                               class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn"
                               data-toggle="modal" data-sign="signup">注册</a>
                        </div>
                    </div>

                    <div class="userinfo-footer row">
                        <div class="col-md-6 col-xs-6 pos-left">
                            <a href="#sign-modal" data-toggle="modal" data-sign="signin"><span><i class="fa fa-diamond"
                                                                                                  aria-hidden="true"></i></span>升级会员</a>
                        </div>
                        <div class="col-md-6 col-xs-6 pos-right">
                            <a href="/contribute" target="_blank"><span><i class="fa fa-comments-o"
                                                                           aria-hidden="true"></i></span>参与讨论</a>
                        </div>
                        <div id="join-private-course" class="modal fade words-ctrl" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">加入私有课</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div style="margin:15px 0;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                                        <form id="private-course-form" method="POST" action="/courses/join">
                                            <div class="form-group">
                                                <label for="code">邀请码</label>
                                                <input class="form-control" id="code" name="code" type="text" value="">
                                                <input name="_csrf_token" type=hidden
                                                       value="1483780974##87f89328c5616669f00302a263fe9061bb852818">
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary"
                                                onclick="document.getElementById('private-course-form').submit();">确定
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sidebox">
                <div class="sidebox-header">
                    <h4 class="sidebox-title">最热路径</h4>
                </div>
                <div class="sidebox-body course-content side-list-body">
                    <a href="/paths/python">Python 研发工程师</a>
                    <a href="/paths/python">Python 研发工程师</a>
                    <a href="/paths/python">Python 研发工程师</a>
                    <a href="/paths/python">Python 研发工程师</a>
                    <a href="/paths/python">Python 研发工程师</a>
                </div>
            </div>
            <div class="side-image side-qrcode">
                <img src="img/ShiyanlouQRCode.png">
                <div class="side-image-text">关注公众号，手机看教程</div>
            </div>
        </div>
    </div>
</div>

<!--登录模态框（登录和注册）-->
<div class="modal fade" id="sign-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <button type="button" class="close-modal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#signin-form" aria-controls="signin-form" role="tab" data-toggle="tab">登录</a>
                    </li>
                    <li role="presentation">
                        <a href="#signup-form" aria-controls="signup-form" role="tab" data-toggle="tab">注册</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="signin-form">
                        <form action="/login" method="post">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-envelope" style="margin:0;"></i>
                                    </div>
                                    <input type="email" name="login" class="form-control" placeholder="请输入邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-lock" style="margin:0;"></i>
                                    </div>
                                    <input type="password" name="password" class="form-control" placeholder="请输入密码">
                                </div>
                            </div>
                            <div class="form-inline verify-code-item" style="display:none;">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" name="captcha_v" class="form-control" placeholder="请输入验证码">
                                    </div>
                                </div>
                                <img class="verify-code" src="" source="https://www.shiyanlou.com/captcha.gif">
                            </div>
                            <div class="form-group remember-login">
                                <input name="remember" type="checkbox" value="y"> 下次自动登录
                                <a class="pull-right" href="../reset_password/index.html">忘记密码？</a>
                            </div>
                            <div class="form-group">
                                <input class="btn btn-primary" name="submit" type="submit" value="进入实验楼">
                            </div>
                            <div class="form-group widget-signin">
                                <span>快速登录</span>
                                <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                                <a href="/auth/weibo?next="><i class="fa fa-weibo"></i></a>
                                <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                                <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                                <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
                            </div>
                            <div class="form-group error-msg">
                                <div class="alert alert-danger" role="alert"></div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="signup-form">
                        <form action="/register" method="post">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-envelope" style="margin:0;"></i>
                                    </div>
                                    <input type="email" name="email" class="form-control" placeholder="请输入邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-lock" style="margin:0;"></i>
                                    </div>
                                    <input type="password" name="password" class="form-control" placeholder="请输入密码">
                                </div>
                            </div>
                            <div class="form-inline">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" name="captcha_v" class="form-control" placeholder="请输入验证码">
                                    </div>
                                </div>
                                <img class="verify-code" src="" source="https://www.shiyanlou.com/captcha.gif">
                            </div>
                            <div class="form-group">
                                <input class="btn btn-primary" name="submit" type="submit" value="注册">
                            </div>
                            <div class="form-group agree-privacy">
                                注册表示您已经同意我们的<a href="../privacy/index.html" target="_blank">隐私条款</a>
                            </div>
                            <div class="form-group widget-signup">
                                <span>快速注册</span>
                                <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                                <a href="/auth/weibo?next="><i class="fa fa-weibo"></i></a>
                                <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                                <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                                <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
                            </div>
                            <div class="form-group error-msg">
                                <div class="alert alert-danger" role="alert"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页尾-->
<div th:include="index::footer"></div>
</body>
</html>
<script>
    $(document).on('show.bs.modal', '.modal', function (e) {
        var $this = $(this);
        var $modal_dialog = $this.find('.modal-dialog');
        $this.css('display', 'block');
        $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2)});
    });
</script>